<template>
  <div>
    <!-- 面包靴导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索栏 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryData.query"
            @change="getUserList"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            @click="isTure = true"
          >新增用户
          </el-button>
        </el-col>
      </el-row>
      <!-- 弹出对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="isTure"
        @close="closeDialog"
        :before-close="handleClose"
        width="35%"
      >
        <!-- 新增表单 -->
        <el-form
          ref="form"
          :model="nihao"
          :rules="addRules"
          label-width="80px"
        >
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input v-model="nihao.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input v-model="nihao.password"></el-input>
          </el-form-item>
          <el-form-item
            label="邮箱"
            prop="email"
          >
            <el-input v-model="nihao.email"></el-input>
          </el-form-item>
          <el-form-item
            label="电话"
            prop="mobile"
          >
            <el-input v-model="nihao.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="isTure = false">取 消</el-button>
          <el-button
            type="primary"
            @click="isTure = false"
          >确 定</el-button>
        </span>

      </el-dialog>

      <!-- 表格区域 -->
      <el-table
        :data="userList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="80px"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话"
        >
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色"
        >
        </el-table-column>
        <el-table-column label="状态">
          <!-- 通过模板插槽将数据填充到 switch开关里 -->
          <template slot-scope="ele">
            <el-switch
              v-model="ele.row.mg_state"
              @change="changeState(ele.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="175px"
        >
          <template>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              content="设置权限"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页页码条 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

    </el-card>

  </div>
</template>
<script>
export default {
  data () {
    // 手机号规则查询函数
    const mobleRuler = (rule, value, cb) => {
      const p = /^1[3|5|7|8|9]\d{9}$/
      if (p.test(value)) return cb()
      cb(new Error('请输入合法手机号'))
    }
    return {
      // 用户列表查询参数对象
      queryData: {
        query: '', // 查询参数
        pagenum: 1, // 当前页码
        pagesize: 2 // 页容量
      },
      userList: [], // 用户数组
      total: 0, // 总用户数
      isTure: false,
      nihao: {
        username: '123',
        password: '',
        email: '',
        mobile: ''
      }, // 表单数据对象
      // 表单验证
      addRules: {
        username: [{
          required: true,
          message: '请输入登录名',
          trigger: 'blur'
        }, {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 15,
          message: '长度在 6 到 15 个字符',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }, {
          type: 'email',
          message: '请输入正确的邮箱',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }, { validator: mobleRuler, trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 取消对话框,清除表单框所有内容
    closeDialog () {
      this.$refs.form.resetFields()
    },
    // 监听pagesize改变的数据 因为这个事件是elementui 的 事件对象, 他可以在选择页码值的时候传递设置的页码值的参数
    handleSizeChange (newPageSize) {
      console.log(newPageSize) // 自己去看就知道了
      //  将选择的新的容量 ,重新设置给data里的queryData查询参数对象
      this.queryData.pagesize = newPageSize
      // 重新进行异步请求 渲染列表
      this.getUserList()
    },
    // 同理
    handleCurrentChange (newPagenum) {
      // 将被点击的页码 ,设置给data
      this.queryData.pagenum = newPagenum
      // 重新进行异步请求 渲染列表
      this.getUserList()
    },
    // 异步获取数据请求数据列表
    async getUserList () {
      const { data: res } = await this.$http.get('users', {
        params: this.queryData
      })
      console.log(res)
      // 如果失败 则显示错误消息,并退出函数
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 如果成功 .则将返回的分页数据设置给 组件 的data,触发视图的重回
      this.userList = res.data.users
      // 将返回的 总用户数量设置给data
      this.total = res.data.total
    },
    // 状态改变事件(状态改变的行数据对象)
    async changeState (rowData) {
      // console.log(rowData) // 打印这个数据 出来的是当前行的数据对象
      console.log(this.userList) // 由于是动态绑定到模板里, 所以这个data数据里的switch状态也会跟着变化
      // console.log(rowData.mg_state) // 打印这个数据出来的switch的布尔值
      // 将传过来的 修改变状态之后 的数据对象 传入服务器进行修改
      const { data: res } = await this.$http.put(`users/${rowData.id}/state/${rowData.mg_state}`)
      console.log(res)
      if (res.meta.status !== 200) {
        // 如果修改状态失败,则返回点击之前的状态(让改变状态的switch状态还原!)
        rowData.mg_state = !rowData.mg_state
        return this.$message.error(res.meta.msg)
      }
      // 弹出成功的弹窗消
      this.$message.success(res.meta.msg)
      console.log(this.userList)
    }
  },
  created () {
    this.getUserList()
  },
  name: 'app'
}
</script>

<style scoped lang="less">

</style>
